<template>
  <div>
    <!-- 客户信息 -->
    <el-form label-width="120px" label-position="left">
      <el-row class="container" STYLE="margin-top:20PX;">
          <h3 style="margin-bottom:20px;">客户信息</h3>
          <el-col :span="12">
              <el-form-item label="客户名称：" @click.native="select">
                  <el-input placeholder="请输入内容" v-model="headerlist.clientName"  style="width:300px"></el-input>
              </el-form-item>
              <el-form-item label="销售员：">
                  <template>
                      <el-select
                          v-model="headerlist.salesperson"
                          style="width:300px"
                          placeholder="请选择"
                      >
                          <el-option
                              v-for="item in userlist"
                              :key="item.id"
                              :label="item.name"
                              :value="item.name"
                          ></el-option>
                      </el-select>
                  </template>
              </el-form-item>
              <el-form-item v-show="showSH" label="收货人：">
                  <el-input style="width:300px;" v-model="headerlist.consignee"></el-input>
              </el-form-item>
              <el-form-item v-show="showSH" label="收货地址：">
                  <el-input style="width:300px;" v-model="headerlist.address"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="10">
			  <el-form-item label="交货时间：">
				  <el-date-picker
					  v-model="headerlist.deliverTime"
					  type="date"
					  value-format="yyyy-MM-dd"
					  placeholder
					  style="width:300px"
				  ></el-date-picker>
			  </el-form-item>
              <el-form-item label="订单来源：">
                  <el-select v-model="headerlist.source" placeholder="请选择" style="width:300px;">
                      <el-option label="线下" value="线下"></el-option>
                      <el-option label="淘宝" value="淘宝"></el-option>
					  <el-option label="京东" value="京东"></el-option>
					  <el-option label="微信" value="微信"></el-option>
					  <el-option label="微店" value="微店"></el-option>
                  </el-select>  
              </el-form-item>
              <el-form-item v-show="showSH" label="收货电话：">
                  <el-input style="width:300px;" v-model="headerlist.phone"></el-input>
              </el-form-item>
          </el-col>
      </el-row>

      <el-dialog title="选择用户" :visible.sync="dialogTableVisible">
        <el-form :model="ruleForm" label-position="left" >
          <el-row :gutter="40">
            <el-col :span="11">
              <el-form-item>
                <el-input v-model="query" @change="getlist" placeholder="用户名称/联系人" style="width:200px;"></el-input>
              </el-form-item>
            </el-col>
          
          </el-row>
          

        </el-form>
        <el-table
            :data="tableData"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
            <el-table-column prop="clientName" sortable label="客户名称"></el-table-column>
            <el-table-column prop="area" sortable label="所在地址"></el-table-column>
            <el-table-column prop="userName" sortable label="联系人"></el-table-column>
            <el-table-column prop="phone" sortable label="手机号码"></el-table-column>

            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"    
                        @click="handleSelect(scope.$index, scope.row)"
                    >选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
          layout="total, prev, pager, next, jumper" 
          :page-size="pagesize" 
          :current-page.sync="currentPage" 
          :total="total"  
          @current-change="handleCurrentChange" 
          style="margin-top:20px"
        ></el-pagination>
      </el-dialog>
    </el-form>




    <!-- 订单信息 -->
    <el-form class="order">
      <el-row class="container" STYLE="margin-top:20PX;">
        <h3 style="margin-bottom:20px;">订单明细</h3>
          <el-table
            :data="orderDetailedList"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
            class="order-table"
          >
            <el-table-column label="产品名称">
              <template slot-scope="scope">
                <el-form-item @click.native="select1(scope.$index, scope.row)">
                  <el-input  placeholder="请输入内容" v-model="scope.row.name" ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="specs" label="规格"></el-table-column>
            <el-table-column prop="batch" label="批号"></el-table-column>
            <el-table-column prop="number" label="数量">
              <template slot-scope="scope">
                <el-form-item>
					 <el-input  placeholder="请输入内容" v-model="scope.row.number" ></el-input>
                  <!-- <el-input-number v-model="ruleForm1.num" controls-position="right"  :min="1" :max="10"></el-input-number> -->
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位"></el-table-column>
            <el-table-column prop="price" label="单价(元)">
              <template slot-scope="scope">
                <el-form-item>
					<el-input  placeholder="请输入内容" v-model="scope.row.price" @change="addup(scope.$index, scope.row)"></el-input>
                  <!-- <el-input-number v-model="ruleForm1.num" controls-position="right"  :min="1" :max="10"></el-input-number> -->
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="totalPrice" label="小计(元)"></el-table-column>

            <!-- <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"    
                        @click="handleSelect(scope.$index, scope.row)"
                    >选择</el-button>
                </template>
            </el-table-column> -->
          </el-table>
          <el-col class="add" @click.native="addProduct">+添加产品</el-col>
      </el-row>
	  
      <el-dialog title="选择产品" :visible.sync="dialogTableVisible1">
        <el-form :model="ruleForm1" label-position="left" label-width="100px">
          <!-- <el-row :gutter="40">
            <el-col :span="11">
              <el-form-item label="产品来源">
                <el-select v-model="ruleForm1.username" placeholder="请选择">
                  <el-option label="机械" value="机械"></el-option>
                  <el-option label="人工" value="人工"></el-option>
                </el-select> 
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="仓库名称">
                <el-select v-model="ruleForm1.username" placeholder="请选择">
                  <el-option label="机械" value="机械"></el-option>
                  <el-option label="人工" value="人工"></el-option>
                </el-select> 
              </el-form-item>
            </el-col>
          </el-row> -->
          

        </el-form>
        <el-table
            :data="ProductList"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
            <el-table-column prop="productName" sortable label="产品名称"></el-table-column>
            <el-table-column prop="storageBatch" sortable label="批号"></el-table-column>
            <el-table-column prop="specs" sortable label="规格">
				<template slot-scope="scope">
					{{scope.row.specs}}{{scope.row.unit}}
				</template>
			</el-table-column>
            <el-table-column prop="batch" sortable label="数量">
				<template slot-scope="scope">
					{{scope.row.surplus}}{{scope.row.oneunit}}
				</template>
			</el-table-column>
			
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"    
                        @click="handleSelect1(scope.$index, scope.row)"
                    >选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
          layout="total, prev, pager, next, jumper" 
          :page-size="pagesize" 
          :current-page.sync="currentPage1" 
          :total="total1"  
          @current-change="handleCurrentChange1" 
          style="margin-top:20px"
        ></el-pagination>
      </el-dialog>
    </el-form>


    <!-- 财务信息 -->
    <el-form label-width="120px" label-position="left">
      <el-row class="container" STYLE="margin-top:20PX;">
          <h3 style="margin-bottom:20px;">财务信息</h3>
          <el-col :span="12">
              <el-form-item label="发票信息：">
                  <el-select v-model="headerlist.invoiceType" @change="showForm" placeholder="请选择" style="width:300px;">
                      <el-option :label="v" :value="v" v-for="(v,i) in ruleForm2.fapiaos" :key="i"></el-option>
                  </el-select>  
              </el-form-item>
              <el-form-item v-show="showFormItem == 1 || showFormItem == 2" label="纳税人识别号：">
                  <el-input placeholder="请输入内容" v-model="headerlist.invoiceCode"  style="width:300px"></el-input>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="地址：">
                  <el-input placeholder="请输入内容" v-model="headerlist.invoiceAddress"  style="width:300px"></el-input>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="开户银行：">
                  <el-input placeholder="请输入内容" v-model="headerlist.invoiceBank"  style="width:300px"></el-input>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="付款情况：">
                  <el-select v-model="headerlist.payStatus" placeholder="请选择" style="width:300px;">
                      <el-option :label="v" :value="v" v-for="(v,i) in ruleForm2.pays" :key="i"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="付款金额：">
                  <el-input placeholder="请输入内容" style="width:300px;" v-model="headerlist.payAmount"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item v-show="showFormItem == 1 || showFormItem == 2" label="公司名称：">
                  <el-input placeholder="请输入内容" style="width:300px;" v-model="headerlist.invoiceRise"></el-input>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="电话号码：">
                  <el-input placeholder="请输入内容" style="width:300px;" v-model="headerlist.invoicePhone"></el-input>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="开户名称：">
                  <el-input placeholder="请输入内容" style="width:300px;" v-model="headerlist.invoiceName"></el-input>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="银行账号：">
                  <el-input placeholder="请输入内容" style="width:300px;" v-model="headerlist.invoiceBankCode"></el-input>
              </el-form-item>
              <el-form-item v-show="showFormItem == 2" label="付款方式：">
                <el-select v-model="headerlist.payType" placeholder="请选择" style="width:300px;">
                    <el-option :label="v" :value="v" v-for="(v,i) in ruleForm2.paytypes" :key="i"></el-option>
                </el-select>  
              </el-form-item>
          </el-col>
      </el-row>

      
      <el-form-item class="footerFixed" v-if="type != 'detail'" label-width="0px">
          <el-button type="primary" style="margin:0 20px;" @click="save">提交</el-button>
          <el-button @click="goback">返回</el-button>
      </el-form-item>
	  <el-form-item class="footerFixed" v-else label-width="0px">
	      
	       <el-button @click="goback">返回</el-button>
	  </el-form-item>
    </el-form>
  </div>
</template>


<script>
	import { client_findByList,user_findByAll,storage_findByList,order_save,order_findById,order_update } from "@/request/api"
	 import {CodeToText} from 'element-china-area-data'
export default {
	  data() {
			return {
				orderDetailedList:[{
					name:'',
					specs:'',
					id:'',
					batch:'',
					storageId:'',
					number:'',
					totalPrice:''
				}],
				  query:'',
				  // 客户信息
				  form1:{

				  },
				  ruleForm:{
					uername:''
				  },
				  dialogTableVisible:false,
				  tableData:[{}],
				  pagesize:10,
				  currentPage:1,
				  total:1,
				  currentPage1:1,
				  total1:1,
				  showSH:false,

				  // 订单明细
				  ruleForm1:{
					username:''
				  },
				  dialogTableVisible1:false,

				  // 财务信息
				  ruleForm2:{
					username:'',
					fapiao:'',
					fapiaos:["不开发票","增值税普通发票","增值税专用发票"],
					pay:'',
					pays:["未付款","已付首款","已付全款"],
					paytype:'',
					paytypes:["现金","银行转账","微信","支付宝"]
				  },
				  showFormItem:0,
				  headerlist:{},
				  userlist:'',
				  ProductList:[],
				  index:'',
				  id:'',
				  type:''
			}
	  },
	  mounted() {
		 this.id = this.$route.query.id
		 this.type = this.$route.query.type
		  if(this.id != undefined){
			  this.getdetails()
		  }
		 this.init()
		 this.getUserList()
		 this.getProductList()
	  },
	  methods: {
		  goback(){
			this.$router.go(-1)  
		  },
		  getdetails(){
			order_findById(this.id).then((res)=>{
				this.headerlist = res.data
				this.orderDetailedList = res.data.orderDetailedList
				this.showSH  =true
				if(this.headerlist.invoiceType == '不开发票' || this.headerlist.invoiceType == null){
					this.showFormItem = 0
				}else if(this.headerlist.invoiceType == '增值税普通发票'){
					this.showFormItem = 1
				}else if(this.headerlist.invoiceType == '增值税专用发票'){
					this.showFormItem = 2
				}
			}) 
		  },
		  save(){
			  this.headerlist.orderDetailedList = this.orderDetailedList
			  if(this.id == undefined){
				  order_save(this.headerlist).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success',
					    duration: 1000
					});
					this.$router.go(-1);
				})
			  }else{
				  order_update(this.headerlist).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success',
					    duration: 1000
					});
					this.$router.go(-1);
				  })
			  }
				
		  },
		  addup(index,row){
			  row.totalPrice = row.price*row.number
			  // console.log(row.totalPrice,111)
		  },
		  
		  addProduct(){
			  // console.log(111)
			this.orderDetailedList.push({name:'',
				specs:'',
				id:'',
				batch:'',
				storageId:'',
				number:'',
				totalPrice:''
			})  
		  },
		  // 获取 产品表
		  getProductList(){
			  let data = {
				  page:this.currentPage1
			  }
			 storage_findByList(data).then((res)=>{
				 
				 this.ProductList = res.rows
				 // console.log(this.ProductList)
				 this.total1 = res.total
				 for(var i=0;i<this.ProductList.length;i++){
					 this.ProductList[i].oneunit = this.ProductList[i].unit.substring(this.ProductList[i].unit.lastIndexOf("\/")+1,this.ProductList[i].unit.length)
					 
				 }
			 }) 
		  },
		  // 获取员工
		  getUserList(){
			  user_findByAll("").then((res)=>{
				  this.userlist = res.data
			  })
		  },
		  
		    getlist(){
				this.init()
			},
			// 获取客户信息
			init(){
				client_findByList({page:this.currentPage,query:this.query}).then((res)=>{
					this.tableData = res.rows
					this.total = res.total
					for (let i = 0; i < this.tableData.length; i++) {
						 var list = this.tableData[i].area.split(",")
						 var arr = ""
						 for (let k = 0; k < list.length; k++) {
							 arr += CodeToText[list[k]] + "/"   
						 }  
					    this.tableData[i].area = arr.substr(0,arr.length-1)
					}
				})
			},
		  
			// 客户信息
			handleSelect(index,row){
				this.showSH = true
				this.dialogTableVisible = false
				this.headerlist.clientId = row.id
				this.headerlist.clientName = row.clientName
				this.headerlist.consignee = row.userName
				this.headerlist.phone = row.phone
				this.headerlist.address = row.address
			},
			select(){
			  this.dialogTableVisible = true
			},
			handleCurrentChange(val){
				this.currentPage = val
				this.init()
			},
			handleCurrentChange1(val){
				this.currentPage1 = val
				this.getpProductList()
			},
			// 订单信息
			handleSelect1(index,row){
			  this.dialogTableVisible1 = false
			  this.orderDetailedList[this.index].name = row.productName
			  this.orderDetailedList[this.index].specs = row.specs + row.unit
			  this.orderDetailedList[this.index].batch = row.storageBatch
			  this.orderDetailedList[this.index].number = row.surplus
			  this.orderDetailedList[this.index].storageId = row.id
			  this.orderDetailedList[this.index].unit = row.oneunit
			  this.orderDetailedList[this.index].warehouseName = row.warehouseName
			  // console.log(this.orderDetailedList)
			  // Vue.set(this.orderDetailedList)
			},
			
			select1(index,row){
			    this.dialogTableVisible1 = true
				this.index = index
			},

			// 财务信息
			showForm(){
				  let obj = this.headerlist
				  if(obj.invoiceType == '不开发票' || obj.invoiceType == null){
					this.showFormItem = 0
				  }else if(obj.invoiceType == '增值税普通发票'){
					this.showFormItem = 1
				  }else if(obj.invoiceType == '增值税专用发票'){
					this.showFormItem = 2
				  }
			 }
		  },
	}
</script>



<style  scoped>
  /* .containers{
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
  } */
  .el-pagination{
      text-align: center;
  } 
  .add{
    background-color: rgba(235, 245, 255, 1);
    border: 1px dotted lightgray;
    color: #333;
    margin: 10px 0 0 0;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
  }
  .order .order-table .el-form-item{
    margin-bottom: 0;
  }
</style>

